<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="image in images" :key="image.id">
        <img v-lazy="image.img" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="item in icons"
        :key="item.id"
        :icon="item.src"
        :text="item.title"
      />
    </van-grid>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      images: [],
      icons: []
    }
  },
  created() {
    this.getlunbo();
    this.getgongge()
  },
  methods: {
    async getlunbo() {
      const { data: { message } } = await axios.get('http://itfly.vip:8888/api/getlunbo')
      this.images = message
    },
    async getgongge() {
      const { data: { message } } = await axios.get('http://itfly.vip:8888/api/grids')
      this.icons = message
      console.log(message)
    }
  }
}
</script>
<style lang="scss">
.my-swipe .van-swipe-item {
  height: 200px;
  background-color: #39a9ed;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
